<template>
  <div id="mapbox"></div>
</template>

<script setup>
import mapboxgl from '!mapbox-gl'
import "mapbox-gl/dist/mapbox-gl.css"
import { onMounted, ref } from 'vue'
const maoboxToken = 'pk.eyJ1Ijoic2dlcmgiLCJhIjoiY21idDFsc3JqMHN0eDJrczdnZjRhbDI2eCJ9.GJEM_ztzV0LFu5y8cRkNCw'
mapboxgl.accessToken = maoboxToken;
onMounted(() => {
  const map = new mapboxgl.Map({
    container: 'mapbox',
    center: [116.4, 39.9],
    // style: 'mapbox://styles/mapbox/streets-v9',
    style: {
      version: 8,
      sources: {
        "raster-tiles": {
          type: "raster",
          tiles: [
            "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
          ],
          tileSize: 256
        }
      },
      layers: [{
        id: "my-tiles",
        type: "raster",
        source: "raster-tiles"
      }],
    },

    projection: 'globe', // Display the map as a globe, since satellite-v9 defaults to Mercator
    zoom: 10,
    // 仰角
    // pitch:  60,
    bearingSnap: 60,
    minZoom: 3,
    // 地轴夹角
    // bearing:20,
  });

  map.on('load', function () {
    map.setFog({
      'horizon-blend': 0.01
    });

    map.addSource('canvas-sourse', {
      type: 'canvas',
      canvas: drawCircle(),
      animate: true,
      coordinates: [
        [116.4-0.001, 39.9+0.001],
        [116.4+ 0.001, 39.9+0.001],
        [116.4 + 0.001, 39.9 -0.001],
        [116.4-0.001, 39.9 - 0.001],
      ],
    });
    console.log(map.getSource('canvas-sourse'))
    map.addLayer({
      id: 'canvas-layer',
      type: 'raster',
      source: 'canvas-sourse',
    });


  })
  map.on('click', function (e) {
    console.log(e)
  })
})

const drawCircle = () => {
  const canvas = document.createElement('canvas')
  canvas.width = 300
  canvas.height = 300
  const ctx = canvas.getContext('2d')
  ctx.beginPath()
  ctx.arc(150, 150, 150, 0, Math.PI * 2)
  ctx.fillStyle = 'red'
  ctx.fill()
  return canvas
}

</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#mapbox {
  width: 100%;
  height: 100vh;

}

.canvas {

  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
}
</style>
